.mantine-datatable {
  --mantine-datatable-color: var(
    light-dark(--mantine-datatable-color-light, --mantine-datatable-color-dark),
    var(--mantine-color-text)
  );
  --mantine-datatable-background-color: var(
    light-dark(--mantine-datatable-background-color-light, --mantine-datatable-background-color-dark),
    var(--mantine-color-body)
  );
  --mantine-datatable-border-color: var(
    light-dark(--mantine-datatable-border-color-light, --mantine-datatable-border-color-dark),
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))
  );
  --mantine-datatable-row-border-color: var(
    light-dark(--mantine-datatable-row-border-color-light, --mantine-datatable-row-border-color-dark),
    var(--mantine-datatable-border-color)
  );
  --mantine-datatable-striped-color: var(
    light-dark(--mantine-datatable-striped-color-light, --mantine-datatable-striped-color-dark),
    light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6))
  );
  --mantine-datatable-highlight-on-hover-color: var(
    light-dark(--mantine-datatable-highlight-on-hover-color-light, --mantine-datatable-highlight-on-hover-color-dark),
    light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))
  );
  --mantine-datatable-selection-color: var(--mantine-primary-color-light);
  --mantine-datatable-shadow-background-top:
    linear-gradient(rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0)),
    linear-gradient(rgba(0, 0, 0, light-dark(0.05, 0.25)) 30%, rgba(0, 0, 0, 0));
  --mantine-datatable-shadow-background-right:
    linear-gradient(to left, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0) 30%);
  --mantine-datatable-shadow-background-bottom:
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, light-dark(0.05, 0.25))),
    linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, light-dark(0.05, 0.25)));
  --mantine-datatable-shadow-background-left:
    linear-gradient(to right, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0)),
    linear-gradient(to right, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0) 30%);

  --mantine-datatable-header-height: 0;
  --mantine-datatable-footer-height: 0;
  --mantine-datatable-selection-column-width: 0;
  --mantine-datatable-top-shadow-opacity: 0;
  --mantine-datatable-left-shadow-opacity: 0;
  --mantine-datatable-bottom-shadow-opacity: 0;
  --mantine-datatable-right-shadow-opacity: 0;
  --mantine-datatable-footer-position: sticky;
  --mantine-datatable-footer-bottom: 0;
  --mantine-datatable-last-row-border-bottom: unset;

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--mantine-datatable-color);
  background: var(--mantine-datatable-background-color);

  th,
  td {
    border-left: 0;
  }

  @mixin rtl {
    th,
    td {
      border-left: 0;
      border-right: 0;
    }

    /* In RTL, add border-right to all cells except the first (which is at the table edge) */
    th:not(:first-of-type),
    td:not(:first-of-type) {
      border-right: 1px solid var(--mantine-datatable-row-border-color);
    }
  }
}

.mantine-datatable-with-border {
  border: rem(1px) solid var(--mantine-datatable-border-color);
}

.mantine-datatable-resizable-columns {
  table-layout: fixed;
}

.mantine-datatable-resizable-columns th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Allow overflow for pinned cells so the ::after shadow pseudo-element is not clipped.
   This overrides overflow: hidden from resizable columns (th) and ellipsis (td). */
.mantine-datatable-pin-first-column.mantine-datatable-resizable-columns th:first-of-type,
.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible.mantine-datatable-resizable-columns
  th:nth-of-type(2),
.mantine-datatable-pin-last-column.mantine-datatable-resizable-columns th:last-of-type,
.mantine-datatable-pin-first-column td:first-of-type,
.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible td:nth-of-type(2),
.mantine-datatable-pin-last-column td:last-of-type {
  overflow: visible;
}

/* Selection column should always have fixed width */
.mantine-datatable th[data-accessor='__selection__'],
.mantine-datatable td[data-accessor='__selection__'] {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
}

/* When not using fixed layout, allow natural table sizing */
.mantine-datatable:not(.mantine-datatable-resizable-columns) th {
  white-space: nowrap;
  /* Allow natural width calculation */
  width: auto;
  min-width: auto;
  max-width: none;
}

/* But selection column should still be fixed even in auto layout */
.mantine-datatable:not(.mantine-datatable-resizable-columns) th[data-accessor='__selection__'],
.mantine-datatable:not(.mantine-datatable-resizable-columns) td[data-accessor='__selection__'] {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
}

.mantine-datatable-table {
  border-collapse: separate;
  border-spacing: 0;
  color: inherit;
  background: var(--mantine-datatable-background-color);

  th,
  td {
    border-color: var(--mantine-datatable-row-border-color);
  }

  thead,
  tbody,
  tfoot,
  thead tr,
  tfoot tr,
  th,
  td {
    background: inherit;
  }

  &[data-striped] tbody tr:nth-of-type(odd) {
    background: var(--mantine-datatable-striped-color);
  }

  &[data-highlight-on-hover] tbody tr:hover {
    background: var(--mantine-datatable-highlight-on-hover-color);
  }

  tbody tr:last-of-type {
    border-bottom: 0;
  }

  tr:last-of-type:not(.mantine-datatable-empty-row) td {
    border-bottom: var(--mantine-datatable-last-row-border-bottom);
  }
}

.mantine-datatable-vertical-align-top td {
  vertical-align: top;
}

.mantine-datatable-vertical-align-bottom td {
  vertical-align: bottom;
}

.mantine-datatable-last-row-border-bottom-visible tr:last-of-type:not(.mantine-datatable-empty-row) td {
  border-bottom: rem(1px) solid var(--mantine-datatable-row-border-color);
}

.mantine-datatable-pin-last-column {
  th:last-of-type,
  td:not(.mantine-datatable-row-expansion-cell):last-of-type {
    position: sticky !important; /* Override position: relative from resizable columns */
    z-index: 1;

    /* This is to fix a minor visual glitch in webkit browsers */
    right: rem(-0.4px);
    @-moz-document url-prefix() {
      right: 0;
    }

    @mixin rtl {
      right: auto;
      left: rem(-0.4px);
      @-moz-document url-prefix() {
        left: 0;
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(-1 * var(--mantine-spacing-xs));
      border-right: 1px solid var(--mantine-datatable-row-border-color);
      width: var(--mantine-spacing-xs);
      background: var(--mantine-datatable-shadow-background-right);
      pointer-events: none;
      opacity: var(--mantine-datatable-right-shadow-opacity);
      transition: opacity 0.2s;

      @mixin rtl {
        /* In RTL, last column is on the left side, shadow/border should be on its right (inside edge) */
        left: 100%;
        right: auto;
        border-left: 1px solid var(--mantine-datatable-row-border-color);
        border-right: 0;
        background: var(--mantine-datatable-shadow-background-left);
        opacity: var(--mantine-datatable-left-shadow-opacity);
        z-index: 2;
      }
    }
  }

  th:last-of-type,
  tr[data-with-row-border]:not(:last-of-type) td:not(.mantine-datatable-row-expansion-cell):last-of-type {
    &::after {
      top: rem(-1px);
      bottom: rem(-1px);
    }
  }

  tfoot th:last-of-type::after {
    top: rem(-1px);
  }

  tr[data-selected] td:not(.mantine-datatable-row-expansion-cell):last-of-type {
    background: inherit;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--mantine-datatable-selection-color);
    }
  }
}

.mantine-datatable-pin-first-column {
  &:not(.mantine-datatable-selection-column-visible) th:first-of-type,
  &:not(.mantine-datatable-selection-column-visible) td:not(.mantine-datatable-row-expansion-cell):first-of-type,
  &.mantine-datatable-selection-column-visible th:first-of-type,
  &.mantine-datatable-selection-column-visible tr:not(:nth-of-type(2)) th:nth-of-type(2),
  &.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2),
  &.mantine-datatable-selection-column-visible td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2) {
    position: sticky !important; /* Override position: relative from resizable columns */
    left: var(--mantine-datatable-selection-column-width);
    z-index: 1;

    @mixin rtl {
      left: auto;
      right: var(--mantine-datatable-selection-column-width);
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: calc(-1 * var(--mantine-spacing-xs));
      border-left: 1px solid var(--mantine-datatable-row-border-color);
      width: var(--mantine-spacing-xs);
      background: var(--mantine-datatable-shadow-background-left);
      pointer-events: none;
      opacity: var(--mantine-datatable-left-shadow-opacity);
      transition: opacity 0.2s;

      @mixin rtl {
        right: auto;
        left: calc(-1 * var(--mantine-spacing-xs));
        border-left: 0;
        border-right: 1px solid var(--mantine-datatable-row-border-color);
        background: var(--mantine-datatable-shadow-background-right);
        opacity: var(--mantine-datatable-right-shadow-opacity);
      }
    }
  }

  &.mantine-datatable-selection-column-visible th.mantine-datatable-header-selector-cell {
    left: 0;

    @mixin rtl {
      left: auto;
      right: 0;
    }
  }

  &:not(.mantine-datatable-selection-column-visible) th:first-of-type,
  &:not(.mantine-datatable-selection-column-visible)
    tr[data-with-row-border]:not(:last-of-type)
    td:not(.mantine-datatable-row-expansion-cell):first-of-type,
  &.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2),
  &.mantine-datatable-selection-column-visible
    tr[data-with-row-border]:not(:last-of-type)
    td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2) {
    &::after {
      top: rem(-1px);
      bottom: rem(-1px);
    }
  }

  &:not(.mantine-datatable-selection-column-visible) tfoot th:first-of-type,
  &.mantine-datatable-selection-column-visible tfoot th:nth-of-type(2) {
    &::after {
      top: rem(-1px);
    }
  }

  &:not(.mantine-datatable-selection-column-visible)
    tr[data-selected]
    td:not(.mantine-datatable-row-expansion-cell):first-of-type,
  &.mantine-datatable-selection-column-visible
    tr[data-selected]
    td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2) {
    background: inherit;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--mantine-datatable-selection-color);
    }
  }
}

/* Explicit override for resizable header cells in pinned columns.
   The .mantine-datatable-header-cell-resizable class sets position: relative,
   but pinned columns need position: sticky for the shadow pseudo-element to work.
   position: sticky also creates a positioning context for absolutely positioned
   children (like the resize handle), so this works correctly. */
.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible)
  th.mantine-datatable-header-cell-resizable:first-of-type,
.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible
  th.mantine-datatable-header-cell-resizable:nth-of-type(2),
.mantine-datatable-pin-last-column th.mantine-datatable-header-cell-resizable:last-of-type {
  position: sticky !important;
}
